.<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js"></script>
	<body>
		<div id="app">
			<table>
				<tr><td>商品：<input v-model="goods.name" type="text"></td></tr>
				<tr><td>数量：<input v-model="goods.price" type="text"></td></tr>
				<tr><td>价格：<input v-model="goods.count" type="text"></td></tr>
				<tr><td><input @click="shopcar" type="submit" value="添加到购物车"></td></tr>
			</table>
			<div v-for="(item,index) in goods">
				{{item.name}}的数量是{{item.count}}，单价是{{item.price}}，小计：{{item.sum}}
			</div>
			<div>总计：总数---{{totalnum}}总价---{{totalprice}}</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				goods:[
					{name:"牙刷",price:10,count:5,sum:50},
					{name:"牙膏",price:20,count:2,sum:60},
					{name:"镜子",price:30,count:3,sum:90}
				]
			},
			methods:{
				shopcar(){
					this.goods.sum=this.goods.price*this.goods.count;
					var newgoods = {name:this.goods.name,price:this.goods.price,sum:this.goods.sum}
					
					console.log(newgoods)
					this.goods.push(newgoods);
					// this.name='';
					// this.price='';
					// this.count='';
				}
			},
			computed:{
				totalprice(){
					return this.goods.reduce((total,b) => {
						return total + b.sum
					},0)
				},
				totalnum(){
					return this.goods.reduce((total,b) => {
						return total + b.count
					},0)
				}
			}
		})
	</script>
</html>